<template>
  <div class="card glass-effect">
    <div class="card-header">
      <h2 class="text-xl font-semibold text-gray-900 dark:text-white flex items-center">
        <Activity class="w-6 h-6 mr-2 text-blue-600 dark:text-blue-400" />
        {{ t('components.status_card.title') }}
      </h2>
    </div>
    
    <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-4 gap-3 md:gap-4 lg:gap-6">
      <!-- 运行状态 -->
      <div class="text-center">
        <div class="flex items-center justify-center w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 mx-auto mb-2 md:mb-3 rounded-full"
             :style="{ backgroundColor: `${currentLevelInfo?.color}20` }">
          <component :is="statusIcon" class="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8" :style="{ color: currentLevelInfo?.color }" />
        </div>
        <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-1">{{ t('components.status_card.running_status') }}</p>
        <p class="text-sm sm:text-base md:text-lg font-semibold" :style="{ color: currentLevelInfo?.color }">
          {{ getLocalizedLevelName(bandwidthStore.currentLevel) }}
        </p>
      </div>
      
      <!-- 当前速度 -->
      <div class="text-center">
        <div class="flex items-center justify-center w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 mx-auto mb-2 md:mb-3 rounded-full bg-blue-100 dark:bg-blue-900/30">
          <Gauge class="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 text-blue-600 dark:text-blue-400" />
        </div>
        <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-1">{{ t('components.status_card.current_speed') }}</p>
        <p class="text-sm sm:text-base md:text-lg font-semibold text-blue-600 dark:text-blue-400">
          {{ formatSpeed(bandwidthStore.status?.current_speed_mbps || 0) }}
        </p>
      </div>
      
      <!-- 已消耗流量 -->
      <div class="text-center">
        <div class="flex items-center justify-center w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 mx-auto mb-2 md:mb-3 rounded-full bg-green-100 dark:bg-green-900/30">
          <Download class="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 text-green-600 dark:text-green-400" />
        </div>
        <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-1">{{ t('components.status_card.bytes_consumed') }}</p>
        <p class="text-sm sm:text-base md:text-lg font-semibold text-green-600 dark:text-green-400">
          {{ bandwidthStore.formattedBytesConsumed }}
        </p>
      </div>
      
      <!-- 运行时间 -->
      <div class="text-center">
        <div class="flex items-center justify-center w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 mx-auto mb-2 md:mb-3 rounded-full bg-purple-100 dark:bg-purple-900/30">
          <Clock class="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 text-purple-600 dark:text-purple-400" />
        </div>
        <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-1">{{ t('components.status_card.duration') }}</p>
        <p class="text-sm sm:text-base md:text-lg font-semibold text-purple-600 dark:text-purple-400">
          {{ bandwidthStore.formattedDuration }}
        </p>
      </div>
    </div>
    
    <!-- 进度条 -->
    <div v-if="bandwidthStore.isRunning" class="mt-6">
      <div class="flex items-center justify-between mb-2">
        <span class="text-sm text-gray-600 dark:text-gray-400">{{ t('components.status_card.bandwidth_progress') }}</span>
        <span class="text-sm font-medium" :style="{ color: currentLevelInfo?.color }">
          {{ Math.round((bandwidthStore.status?.current_speed_mbps || 0) / (currentLevelInfo?.speed_mbps || 1) * 100) }}%
        </span>
      </div>
      <div class="w-full bg-gray-200 dark:bg-[#141414] rounded-full h-2">
        <div class="h-2 rounded-full transition-all duration-500"
             :style="{ 
               backgroundColor: currentLevelInfo?.color,
               width: `${Math.min(100, Math.round((bandwidthStore.status?.current_speed_mbps || 0) / (currentLevelInfo?.speed_mbps || 1) * 100))}%`
             }" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Activity, Gauge, Download, Clock, Play, Square, Zap } from 'lucide-vue-next'
import { useBandwidthStore } from '@/stores/bandwidth'
import { useI18n } from '@/composables/useI18n'

const bandwidthStore = useBandwidthStore()
const { t } = useI18n()

const currentLevelInfo = computed(() => {
  return bandwidthStore.levelInfos[bandwidthStore.currentLevel]
})

const statusIcon = computed(() => {
  if (bandwidthStore.isRunning) {
    return bandwidthStore.currentLevel === 'extreme' ? Zap : Play
  }
  return Square
})

// 获取国际化的等级名称
const getLocalizedLevelName = (level: string): string => {
  if (level === 'off') return t('status.off')
  const levelKey = level.toLowerCase()
  return t(`levels.${levelKey}`)
}

const formatSpeed = (mbps: number): string => {
  return `${mbps.toFixed(2)} Mbps`
}
</script> 